<template>
    <div class="login-container">
      <el-form
        ref="loginFormRef"
        :model="loginData"
        :rules="loginRules"
        class="login-form"
      >
        <div class="flex text-white items-center py-4">
          <span class="text-2xl flex-1 text-center">综合管理系统</span>
          <lang-select style="color: #fff" />
        </div>
  
        <el-form-item prop="username">
          <div class="p-2 text-white">
            <svg-icon icon-class="user" />
          </div>
          <el-input
            class="flex-1"
            ref="username"
            size="large"
            v-model="loginData.username"
            :placeholder="用户名"
            name="username"
          />
        </el-form-item>
  
        <el-tooltip
          :disabled="isCapslock === false"
          content="Caps lock is On"
          placement="right"
        >
          <el-form-item prop="password">
            <span class="p-2 text-white">
              <svg-icon icon-class="password" />
            </span>
            <el-input
              class="flex-1"
              v-model="loginData.password"
              :placeholder="密码"
              :type="passwordVisible === false ? 'password' : 'input'"
              size="large"
              name="password"
              @keyup="checkCapslock"
              @keyup.enter="handleLogin"
            />
            <span class="mr-2" @click="passwordVisible = !passwordVisible">
              <svg-icon
                :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
                class="text-white cursor-pointer"
              />
            </span>
          </el-form-item>
        </el-tooltip>
  
        <!-- 验证码 -->
        <el-form-item prop="verifyCode">
          <span class="p-2 text-white">
            <svg-icon icon-class="verify_code" />
          </span>
          <el-input
            v-model="loginData.verifyCode"
            auto-complete="off"
            :placeholder="验证码"
            class="w-[60%]"
            @keyup.enter="handleLogin"
          />
  
          <div class="captcha">
            <img :src="captchaBase64" @click="getCaptcha" />
          </div>
        </el-form-item>
  
        <el-button
          size="default"
          :loading="loading"
          type="primary"
          class="w-full"
          @click.prevent="handleLogin"
          >登录
        </el-button>
  
        <!-- 账号密码提示 -->
        <div class="mt-4 text-white text-sm">
          <span>登录账号： admin</span>
          <span class="ml-4"> 登录密码: 123456</span>
        </div>
      </el-form>
    </div>
  </template>
  
  <script setup lang="ts">
  
  // API依赖
  import { useRoute } from "vue-router";
  import {LoginData} from "@/interface/LoginIF"
  const route = useRoute();
  
  /**
   * 按钮loading
   */
  const loading = ref(false);
  /**
   * 是否大写锁定
   */
  const isCapslock = ref(false);
  /**
   * 密码是否可见
   */
  const passwordVisible = ref(false);
  /**
   * 验证码图片Base64字符串
   */
  const captchaBase64 = ref();
  
  /**
   * 登录表单引用
   */
  const loginFormRef = ref(ElForm);
  
  const loginData = ref<LoginData>({
    username: "admin",
    password: "123456",
  });
  
  const loginRules = {
    username: [{ required: true, trigger: "blur" }],
    password: [{ required: true, trigger: "blur", validator: passwordValidator }],
    verifyCode: [{ required: true, trigger: "blur" }],
  };
  
  /**
   * 密码校验器
   */
  function passwordValidator(rule: any, value: any, callback: any) {
    if (value.length < 6) {
      callback(new Error("The password can not be less than 6 digits"));
    } else {
      callback();
    }
  }
  
  /**
   * 检查输入大小写状态
   */
  function checkCapslock(e: any) {
    const { key } = e;
    isCapslock.value = key && key.length === 1 && key >= "A" && key <= "Z";
  }
  
  /**
   * 获取验证码
   */
  function getCaptcha() {
    // getCaptchaApi().then(({ data }) => {
    //   const { verifyCodeBase64, verifyCodeKey } = data;
    //   loginData.value.verifyCodeKey = verifyCodeKey;
    //   captchaBase64.value = verifyCodeBase64;
    // });
  }
  
  /**
   * 登录
   */
  function handleLogin() {
    loginFormRef.value.validate((valid: boolean) => {
      if (valid) {
        loading.value = true;
        console.log(loginData.value);
        
      }
    });
  }
  
  onMounted(() => {
    getCaptcha();
  });
  </script>
  
  <style lang="scss" scoped>
  .login-container {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background-color: #2d3a4b;
  
    .login-form {
      width: 520px;
      max-width: 100%;
      padding: 160px 35px 0;
      margin: 0 auto;
      overflow: hidden;
  
      .captcha {
        position: absolute;
        top: 0;
        right: 0;
  
        img {
          width: 120px;
          height: 48px;
          cursor: pointer;
        }
      }
    }
  }
  
  .el-form-item {
    background: rgb(0 0 0 / 10%);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
  }
  
  .el-input {
    background: transparent;
  
    // 子组件 scoped 无效，使用 :deep
    :deep(.el-input__wrapper) {
      padding: 0;
      background: transparent;
      box-shadow: none;
  
      .el-input__inner {
        color: #fff;
        background: transparent;
        border: 0;
        border-radius: 0;
        caret-color: #fff;
  
        &:-webkit-autofill {
          box-shadow: 0 0 0 1000px transparent inset !important;
          -webkit-text-fill-color: #fff !important;
        }
  
        // 设置输入框自动填充的延迟属性
        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus,
        &:-webkit-autofill:active {
          transition: color 99999s ease-out, background-color 99999s ease-out;
          transition-delay: 99999s;
        }
      }
    }
  }
  </style>
  
  